<template>
	<view class="pwd">
		<view class="pwd_form">
			<view class="pwdInfo">
			<view class="title">找回密码</view>
			<image src="../../static/logo.png" mode="aspectFill" class="logo"></image>
			</view>
			<up-form :rules="rules" :model="store.form" errorType="message" ref="pwdFormRef" >
				<up-form-item
						prop="username"
						borderBottom="true"
						ref="item1"
						label-width="0px"
				>
					<up-input
							v-model="store.form.username"
							border="none"
							placeholder="请输入账号"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="email"
						borderBottom="true"
						ref="item2"
						label-width="0px"
				>
					<up-input
							v-model="store.form.email"
							border="none"
							placeholder="请输入邮箱"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="newPassword"
						borderBottom="true"
						ref="item3"
						label-width="0px"
				>
					<up-input
							v-model="store.form.newPassword"
							border="none"
							placeholder="请输入新密码"
							type="password"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
						prop="passwordAgain"
						borderBottom="true"
						ref="item4"
						label-width="0px"
				>
					<up-input
							v-model="store.form.passwordAgain"
							border="none"
							placeholder="请重新输入新密码"
							type="password"
							clearable
					></up-input>
				</up-form-item>
				<up-form-item
					prop="code"
					labelWidth="80"
					borderBottom="true"
					label-width="0px"
				>
					<up-input
						v-model="store.form.code"
						border="none"
						placeholder="请填写验证码"
					></up-input>
					<up-code
						ref="uCode"
						@change="codeChange"
						keep-running
						change-text="倒计时XS"
						@start="disabled = true"
						@end="disabled = false"
						seconds="30"
						start-text="获取邮箱验证码"
						end-text="重新获取"
					></up-code>
					<up-button
						#right
						style="flex: 0.5;"
						type="primary"
						@tap="store.getCode(uCode)"
						:text="tips"
						size="mini"
						:disabled="disabled"
						color="#000033"
					></up-button>
				</up-form-item>
			</up-form>
			<up-button class="pwd_submit" type="primary" text="提交" color='#000033' @click="submit()"></up-button>
		</view>
	</view>
</template>

<script setup>
	
import { ref,reactive } from 'vue';
import usePwdStore from '../../store/pwd';

const store=usePwdStore()
const pwdFormRef = ref(null);
const tips=ref('')
const disabled=ref(false)
const uCode=ref(null)

const submit=()=>{
	  pwdFormRef.value.validate().then(valid => {  
	    if (valid) {  
			store.findPwd()
	    } else {  
	      uni.$u.toast('校验失败')
	    }  
	  }).catch(() => {  
	});  
}

const codeChange=(text)=>{
	tips.value = text;
}

const rules=reactive({
	username:{
		type: 'string',
		required: true,
		message: '账号不能为空',
		trigger: ['change']
	},
	email:[
	{
		type: 'string',
		required: true,
		message: '邮箱不能为空',
		trigger: ['change']
	},
	{
		type: 'email',
		required: true,
		message: '请输入正确的邮箱格式',
		trigger: ['change']
	}],
	newPassword:{
		type: 'string',
		required: true,
		message: '新密码不能为空',
		trigger: ['change']
	},
	passwordAgain:[
	{
		type: 'string',
		required: true,
		message: '请重新输入新密码',
		trigger: ['change']
	},
	{
		validator:(rule, value, callback)=>{
			if(value===store.form.newPassword){
				return true
			}else{
				return false
			}},
		message:'2次输入的密码不一致',
		trigger: ['blur', 'change']
	}],
	code:[
		{
			type: 'string',
			required: true,
			message: '邮箱验证码不能为空',
			trigger: ['blur','change']
		},
		{
			type: 'string',
			required: true,
			len: 6,
			message: '请填写6位验证码',
			trigger: ['blur','change']
		}
	]
})
</script>

<style scoped>
uni-page-body{
	height: 100%;
}
.pwd{
	width: 750rpx;
	height: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background-color: #F7F7F7;
}
.pwd_form{
	margin-top: 30rpx;
	margin-left: 30rpx;
	margin-right: 30rpx;
	background-color: white;
	border-radius: 40rpx;
	height: 800rpx;
	padding: 40rpx;
}
.pwd_submit{
	margin-top: 30rpx;
}
.logo{
	width: 100rpx;
	height: 100rpx;
	margin-left: 50rpx;
}
.pwdInfo{
	display: flex;
	align-items: center;
	background-color: white;
}
.title{
	font-size: 40rpx;
	margin-left: 120rpx;
	font-weight: 700;
}
</style>
